<template>
	<view class="learn-log-container">
		<view class="header">
			<view class="icon" v-for="item in 2" :key="item"></view>
			<view class="tips">小提示：进度条显示的是您当前所有课程的学习进度哦</view>
			<u-circle-progress :percent="percent(learnedTimeLength, totalTimeLength)" duration="2000" active-color="#2499b2" inactive-color="#eee" bg-color="#000">
				<view class="u-progress-content">
					<view class="u-progress-dot"></view>
					<text class='u-progress-info'>{{realPercent(learnedTimeLength, totalTimeLength)}}%</text>
				</view>
			</u-circle-progress>
			<view class="bottom"><span>已学{{learnedTimeLength || 0}}分钟</span>/共{{totalTimeLength || 0}}分钟</view>
		</view>
		<view class="main" v-if="classList.length > 0">
			<view class="card" v-for="(item, index) in classList" :key="index">
				<view class="card-line">
					<view class="line-item">
						<span>学校</span><span>{{item.schoolName}}</span>
					</view>
					<!-- <view class="line-item">
						<span>系</span><span></span>
					</view> -->
				</view>
				<view class="card-line">
					<view class="line-item">
						<span>课程</span><span>{{item.courseName}}</span>
					</view>
				</view>
				<view class="card-line">
					<view class="line-item">
						<span>班级</span><span>{{item.className}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="main empty" v-else>
			<j-icon name="icon-empty" size="150" color="#2499b2"></j-icon>
			<view class="tips">您还没有报名的课程哦</view>
		</view>
	</view>
</template>

<script>
	import jIcon from '@/components/jIcon/jIcon.vue';
	export default{
		name: 'learnLog',
		components: { jIcon },
		data(){
			return{
				learnedTimeLength: 0,
				totalTimeLength: 0,
				classList: [
					{}, {}, {}
				]
			}
		},
		computed:{
			percent:function(){
				return function(current, total){
					if(!total || total == 0){
						return 0;
					}
					let res = parseInt((current/total) * 100);
					if(res < 5){
						return 5;
					}
					return res;
				}
			},
			realPercent:function(){
				return function(current, total){
					if(!total || total == 0){
						return 0;
					}
					return parseInt((current/total) * 100);
				}
			}
		},
		onLoad() {
			this.$http.request({
				url: 'api/School/MyChannelClass',
				method: 'GET'
			})
			.then(resp => {
				this.learnedTimeLength = resp.learnedTimeLength;
				this.totalTimeLength = resp.totalTimeLength;
				this.classList = resp.classList;
			});
		}
	}
</script>

<style lang="scss" scoped>
	.learn-log-container{
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
	}
	.header{
		width: 100%;
		min-height: 350rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 20rpx;
		background-color: #000;
		color: #fff;
		position: relative;
		.icon{
			width: 80rpx;
			height: 80rpx;
			background-image: url(../../static/icon/success.png);
			background-size: 100%;
			background-repeat: no-repeat;
			position: absolute;
			opacity: .4;
		}
		.icon:nth-child(1){
			top: 40%;
			left: 10%;
			transform: rotate(40deg);
		}
		.icon:nth-child(2){
			top: 30%;
			right: 15%;
			transform: rotate(-45deg);
		}
		.tips{
			font-size: 25rpx;
			line-height: 40rpx;
			word-break: break-all;
			color: #eee;
		}
		.u-progress-content{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #2499b2;
		}
		
		.u-progress-info {
			font-size: 28rpx;
			padding-left: 16rpx;
			letter-spacing: 2rpx
		}
		.bottom{
			span{
				color: #2499b2;
			}
		}
	}
	.main::before{
		content: "";
		width: 150rpx;
		height: 8rpx;
		background-color: #2499b2;
		border-radius: 10rpx;
		position: absolute;
		left: 40%;
		top: 0;
	}
	.main{
		width: 100%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
		top: -20rpx;
		&.empty{
			min-height: 50vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.tips{
				margin-top: 20rpx;
				font-size: 30rpx;
			}
		}
		.card:nth-child(2n){
			background-color: #f8f8f8;
		}
		.card:active{
			background-color: #eee;
		}
		.card{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			transition: background-color .3s;
			.card-line{
				width: 100%;
				line-height: 80rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.line-item{
					flex: 1;
					span:nth-child(1){
						display: inline-block;
						width: 100rpx;
					}
					span:nth-child(1)::after{
						content: ":";
					}
					span:nth-child(2){
						width: 70%;
					}
				}
			}
		}
	}
	
</style>
